<template>
    <div>
        <div class="box">
            <div class="head">{{ exam.title }}
                <span>{{ time }}</span>
            </div>
            <div class="small">
                <div class="left">
                    <ExamLeft :seconds="seconds"/>
                </div>
                <div class="centre">
                    <ExamCentre :centreIndex="exam.list.index" :centreName="centreName" />
                    <div class="btn">
                        <button @click="up" :disabled="upDisabled">上一题 </button>
                        <button @click="next" :disabled="nextDisabled">下一题 </button>
                        <button @click="submitquestion">交卷 </button>
                    </div>
                    <div class="icon">
                        <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
                            答题卡
                        </el-button>
                    </div>
                </div>
                <el-drawer v-model="drawer" title="I am the title" :with-header="false">
                    <ExamRight :params="exam.list.arrList" />
                </el-drawer>
            </div>
            <div class="footer"></div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import ExamLeft from '../../components/ExamLeft/ExamLeft.vue'
import ExamCentre from '../../components/ExamCentre/ExamCentre.vue'
import ExamRight from '../../components/ExamRight/ExamRight.vue'
import { ref } from 'vue'
import { ElNotification } from 'element-plus'


export default {
    name: "",
    components: {
        ExamLeft, ExamCentre, ExamRight
    },
    data() {
        return {
            title: "驾考科目一",
            iconChange: true,
            time: null,
            seconds: 2700,
            drawer: ref(false),
        }
    },
    created() {

    },
    mounted() {
        this.Time()
    },
    methods: {
        //格式化 分 秒 函数
        countDown() {
            let m = parseInt(this.seconds / 60 % 60) 
            m = m < 10 ? "0" + m : m
            let s = parseInt(this.seconds % 60)
            s = s < 10 ? "0" + s : s
            this.time = m + ":" + s
        },
        //定时器每过1秒参数减1
        Time() {
            this.Time = setInterval(() => {
                this.seconds -= 1
                this.countDown()
                if(this.seconds === 600) {
                    ElNotification({
                        title: 'Warning',
                        message: '请考生注意答题时间',
                        type: 'warning',
                        position: 'top-left',
                    })
                }
                if (this.seconds === 0) {
                    clearInterval(this.Time)
                    location.replace("/personalCenter");
                }
            }, 1000)
        },
        //切换上一题
        up() {
            //当前题目下标
            let index = this.exam.list.index - 1
            //修改当前题目下标
            this.$store.commit("exam/setListIndex", { index });
        },
        //切换下一题
        next() {
            let index = this.exam.list.index + 1
            this.$store.commit("exam/setListIndex", { index });
        },
        //提交答案
        submitquestion() {
            this.$confirm("确定后系统自动阅卷并产生分数，继续吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                //打开执行结果统计界面
                clearInterval(this.Time)
                location.replace("/personalCenter");
                //存入时间
            });
        },
        //获取答题时间
        ttimes(){
            let times = this.seconds
            return this.$store.commit("exam/setTime", { times });
        },
    },
    computed: {
        ...mapState(['exam']),
        //当前题目
        centreName() {
            return this.$store.getters['exam/getListCountName']
        },
        //上一题是否禁用
        upDisabled() {
            return this.exam.list.index === 0 ? true : false
        },
        //下一题是否禁用
        nextDisabled() {
            return this.exam.list.index === this.$store.getters['exam/getListCount'] - 1 ? true : false
        },

    },
}
</script>
<style scoped lang="scss">
* {
    padding: 0px;
    margin: 0px;
}

 .box {
//     margin-top: 50vh;
//     transform: translateY(-50%);
    background-color: #f0f0f0;

    .head {
        height: 110px;
        width: 100%;
        text-align: center;
        line-height: 110px;
        font-weight: bold;
        font-size: 25px;
        position: relative;
        border-bottom: 1px solid #ccc;

        span {
            color: red;
            position: absolute;
            right: 100px;
        }
    }

    .small {
        display: flex;
        position: relative;
        background-color: #fafafa;

        .left {
            height: 500px;
            width: 350px;
            border-right: 1px solid #ccc;
        }

        .centre {
            height: 500px;
            width: 900px;
            position: relative;

            .btn {
                position: absolute;
                bottom: 80px;
                right: 100px;

                button {
                    border: none;
                    height: 40px;
                    width: 100px;
                    font-size: 17px;
                    color: white;
                    margin-right: 40px;
                    font-weight: bold;
                }

                :nth-child(1) {
                    background-color: #4096ff;
                }

                :nth-child(2) {
                    background-color: #69b1ff;
                }

                :nth-child(3) {
                    background-color: #95de64;
                }
            }

            .icon {
                position: absolute;
                top: 0px;
                right: -100px;
            }
        }
    }
    .footer {
        border-top: 1px solid #ccc;
    }
}
</style>